<template>
  <view class="edit">
    <image class="headImage" @click="onHeadImage" :src="userinfo.avatar" mode=""></image>
    <view @click="onNickName" class="info flex-center-between">
      <view class="info-left">
        你的昵称
      </view>
      <view class="info-right">
        <text class="exceedingEllipsis">{{userinfo.nickname}}</text>
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>
    <view @click="onSex" class="info flex-center-between">
      <view class="info-left">
        性别
      </view>
      <view class="info-right">
        <text class="exceedingEllipsis" v-if="userinfo.gender !=0">{{userinfo.gender==1?'男':'女'}}</text>
        <text class="exceedingEllipsis" v-if="userinfo.gender ==0"></text>
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>
    <view @click="onAdress" class="info flex-center-between">
      <view class="info-left">
        地址
      </view>
      <view class="info-right">
        <text class="exceedingEllipsis">{{userinfo.address}}</text>
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>
    <view @click="onMobile" class="info flex-center-between">
      <view class="info-left">
        手机
      </view>
      <view class="info-right">
        <!-- <text class="exceedingEllipsis">{{userinfo.mobile_encrypt}}</text> -->
        <text class="exceedingEllipsis">{{userinfo.mobile.slice(0,3)+'****'+userinfo.mobile.slice(userinfo.mobile.length-4,userinfo.mobile.length)}}</text>
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>
    <view @click="onPassword" class="info flex-center-between">
      <view class="info-left">
        修改密码
      </view>
      <view class="info-right">
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>

    <view @click.stop="toAgreement('policy')" class="info flex-center-between">
      <view class="info-left">
        隐私政策
      </view>
      <view class="info-right">
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>
    <view @click.stop="toAgreement('agreement')" class="info flex-center-between">
      <view class="info-left">
        注册协议
      </view>
      <view class="info-right">
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>

    <view @click.stop="signOut('signOut')" class="info flex-center-between">
      <view class="info-left">
        注销账号
      </view>
      <view class="info-right">
        <u-icon name="arrow-right" color="#E6E6E6" size="26"></u-icon>
      </view>
    </view>
    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </x-modal>
    <editPop v-if="show" :title="title" :type="type" @editChange="editChange" @close='closeWin' ref="editPop"></editPop>
    <u-action-sheet :border-radius="16" safe-area-inset-bottom="true" :list="list" @click="actionChange" v-model="showAction"></u-action-sheet>

    <view class="botton" @click.stop="logout('logout')">退出登录</view>

    <view class="version">版本号：{{version}}</view>
  </view>
</template>

<script>
import uploadFile from '@/js/uploadFile.js';
import api from '@/api/index.js';
import editPop from './popup'
export default {
  components: {
    editPop
  },
  data() {
    return {
      show: false,
      showAction: false,
      list: [],
      photoType: [{
        text: '拍摄'
      }, {
        text: '相册选择'
      },],
      sexType: [{
        text: '男',
        value: '1'
      }, {
        text: '女',
        value: '2'
      }],
      headImage: '',
      title: '',
      type: '',
      phone: '17621471813',

      userinfo: { mobile: '', address: '' },
      contractObj: {
        title: '',
        content: '您确定注销账号吗？',
        isShow: false,
        showBotton: true,
        cancelText: '取消',
        confirmText: '确认',
        showOneBotton: false,
        showTitle: false,
        type: '',
        version: ''
      }
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    init() {
      //   this.userinfo = uni.getStorageSync('userinfo')
      //   console.log(this.userinfo)
      this.getVersion()
      this.getMyInfo()

    },
    getVersion() {
      api.base.getVersion().then(res => {
        if (res.code == 1) {
          this.version = res.data.vs_see
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    getMyInfo() {
      api.base.getMyInfo().then(res => {
        if (res.code == 1) {
          this.userinfo = res.data
          if (this.userinfo.province == null) {
            this.userinfo.address = ''
          } else {
            this.userinfo.address = '' + this.userinfo.province + this.userinfo.city + this.userinfo.county + this.userinfo.address
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    adressChange(e) {
      console.log("e:", e);
    },
    popSubmit() {
      this.show = false;
    },
    onNickName() {
      this.type = "editNickName";
      this.title = "修改昵称";
      this.show = true;
    },

    onAdress() {
      this.type = "editAdress";
      this.title = "修改地址";
      this.show = true;
    },
    onMobile() {
      this.type = "editMobile";
      this.title = "修改手机号";
      this.show = true;
    },
    onPassword() {
      this.type = "editPassword";
      this.title = "修改密码";
      this.show = true;
    },
    editChange(type, data) {
      if (type == 'editNickName') {
        this.userinfo.nickname = data.nickName
      } else if (type == 'editMobile') {
        this.userinfo.mobile = data.mobile
      } else if (type == 'editAdress') {
        this.userinfo.address = data.defaultRegionAddress + data.address
      } else if (type == 'editPassword') {
        setTimeout(() => {
          uni.removeStorageSync('token')
          uni.removeStorageSync('userinfo')
          uni.reLaunch({
            url: '/pages/login/login'
          })
        }, 1000);
      }
      this.show = false;
      console.log('确定', type, data)
    },
    onHeadImage() {
      this.type = 'editHeadInamg';
      this.list = this.photoType;
      this.showAction = true;
    },
    onSex() {
      this.type = 'editSex';
      this.list = this.sexType;
      this.showAction = true;
    },
    actionChange(e) {
      let that = this

      if (that.type == 'editHeadInamg') {
        that.editHeadImage(e);
      } else if (that.type == 'editSex') {
        //修改性别
        that.changeProfile({ gender: that.sexType[e].value })
        that.userinfo.gender = that.sexType[e].value
      }
    },
    changeProfile(params) {
      api.base.changeProfile(params).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    editHeadImage(e) {
      let that = this
      let type = e === 0 ? 'camera' : 'album';
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: [type],   //album 从相册选图，camera 使用相机
        success: function (res) {
          that.userinfo.avatar = res.tempFilePaths[0];
          uploadFile(res.tempFilePaths[0]).then(res => {
            that.changeProfile({ avatar: res.url })
          });
        }
      });
    },
    closeWin() {
      this.$refs.editPop.closeWin()
      this.show = false
    },
    signOut(type) {
      this.contractObj.type = type
      this.contractObj.content = '您确定注销账号吗？'
      this.contractObj.isShow = true
    },

    logout(type) {
      this.contractObj.type = type
      this.contractObj.content = '您确定退出账号吗？'
      this.contractObj.isShow = true
    },
    cancel(e) {
      this.contractObj.isShow = false
    },
    confirm(e) {
      if (this.contractObj.type == 'signOut') {
        api.base.logoff().then((res) => {
          if (res.code == 1) {
            uni.showToast({
              title: '注销成功',
              icon: 'none'
            });
            this.contractObj.isShow = false
            setTimeout(() => {
              uni.removeStorageSync('token')
              uni.removeStorageSync('userinfo')
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1000);
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        });
      } else if (this.contractObj.type == 'logout') {
        api.base.logout().then((res) => {
          if (res.code == 1) {
            uni.showToast({
              title: '退出成功',
              icon: 'none'
            });
            this.contractObj.isShow = false
            setTimeout(() => {
              uni.removeStorageSync('token')
              uni.removeStorageSync('userinfo')
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1000);
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        });
      }



    },
    cancel(e) {
      this.contractObj.isShow = false
    },
    toAgreement(type) {
      uni.navigateTo({
        url: `/pages/login/agreement?type=${type}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100vh;
  .botton {
    position: absolute;
    width: 750rpx;
    height: 104rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    bottom: 84rpx;
    text-align: center;
  }

  .headImage {
    width: 154rpx;
    height: 154rpx;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border: 4rpx solid #ffffff;
    border-radius: 50%;
    margin-top: 110rpx;
    margin-bottom: 40rpx;
  }

  .info {
    width: 100%;
    height: 104rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    margin-top: 4rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border-bottom: 1rpx solid #e6e6e6;
    box-sizing: border-box;

    &-left {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 33rpx;
    }

    &-right {
      display: flex;
      align-items: center;

      text {
        width: 500rpx;
        text-align: right;
        margin-right: 16rpx;
      }
    }
  }
}
.version {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  font-size: 20rpx;
}
</style>